<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
    <style>
      .demo-open {
        background-color: aqua !important;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div class="layui-btn-container">
        <button id="layerMsg" class="layui-btn">layer.msg</button>
        <button id="layerAlert" class="layui-btn">layer.alert</button>
        <button id="layerLoad" class="layui-btn">layer.load</button>
        <button id="layerConfirm" class="layui-btn">layer.confirm</button>
        <button id="layerPrompt" class="layui-btn">layer.prompt</button>
        <button id="layerTab" class="layui-btn">layer.tab</button>
        <button id="layerPhotos" class="layui-btn">layer.photos</button>
        <button id="layerOpen1" class="layui-btn">layer.open 1 页面层</button>
        <button id="layerOpen2" class="layui-btn">layer.open 2 iframe</button>
        <button id="layerOpen3" class="layui-btn">layer.open 3 加载层</button>
        <button id="layerOpen4" class="layui-btn">layer.open 4 tip</button>
        <button id="layerOpen5" class="layui-btn">layer.open 1 skin: 'demo-open'</button>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["layer"], function () {
        var $ = layui.$,
          layer = layui.layer;

        // ready 初始化就绪 页面一打开就执行弹层
        layer.ready(function () {
          layer.msg("很高兴一开场就见到你");
        });
        $("#layerMsg").on("click", function () {
          layer.msg(
            "layer.msg",
            {
              // icon: 6, // 默认无图标 可传入0-6
            },
            function () {
              console.log("监听到msg关闭");
            }
          );
        });
        $("#layerAlert").on("click", function () {
          layer.alert(
            "layer.msg",
            {
              // icon: 5, // 默认无图标 可传入0-6
            },
            function (index) {
              console.log("alert点击确定的回调");
              layer.close(index);
            }
          );
        });
        $("#layerLoad").on("click", function () {
          layer.load("layer.msg", {
            // icon: 2, // 默认为0 可传入0-2
          });
        });
        $("#layerConfirm").on("click", function () {
          // 第三个参数第四个参数 分别是 yes no 的回调
          layer.confirm("内容", {
            title: "标题",
            // btn: ["按钮1", "按钮2", "按钮3"], // 默认是 [确定，取消]
            btn1: function (index, layero) {
              console.log("确定", index, layer);
            },
            btn2: function (index, layero) {
              console.log("取消", index, layer);
            },
            cancel: function (index, layero) {
              console.log("右上角", index, layer);
            },
          });
        });
        $("#layerPrompt").on("click", function () {
          layer.prompt(
            {
              formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
              value: "初始值",
              title: "请输入值",
            },
            function (value, index, elem) {
              console.log(value); //得到value
              layer.close(index);
            }
          );
        });
        $("#layerTab").on("click", function () {
          layer.tab({
            area: ["600px", "300px"],
            tab: [
              {
                title: "TAB1",
                content: "内容1",
              },
              {
                title: "TAB2",
                content: "内容2",
              },
              {
                title: "TAB3",
                content: "内容3",
              },
            ],
          });
        });
        $("#layerPhotos").on("click", function () {
          var json = {
            title: "相册标题", //相册标题
            id: 123, //相册id
            start: 0, //初始显示的图片序号，默认0
            data: [
              //相册包含的图片，数组格式
              {
                alt: "图片名1",
                pid: 666, //图片id
                src: "https://scpic.chinaz.net/files/pic/pic9/202105/hpic3898.jpg", //原图地址
                thumb: "https://scpic.chinaz.net/files/pic/pic9/202105/hpic3898.jpg", //缩略图地址
              },
              {
                alt: "图片名2",
                pid: 6667, //图片id
                src: "https://scpic.chinaz.net/files/pic/pic9/202105/bpic23098.jpg", //原图地址
                thumb: "https://scpic.chinaz.net/files/pic/pic9/202105/bpic23098.jpg", //缩略图地址
              },
            ],
          };
          // dom 示例
          // <div id="layer-photos-demo" class="layer-photos-demo">
          //   <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
          //   <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
          // </div>
          layer.photos({
            photos: json, // 传json 或者 dom选择器
            anim: 2, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            tab: function (pic, layero) {
              console.log(pic); //当前图片的一些信息
            },
          });
        });

        $("#layerOpen1").on("click", function () {
          layer.open({
            type: 1, // 默认0  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            title: "标题lll",
            content: "<h1>可传入字符串、html、dom</h1>",
            // skin:".xxx" ,// 类名
            // area: "100px", // 宽高  默认 "auto" 传递一个px时指定宽度 传递[px,px]同时指定宽高
            // offset: "rb", // 坐标  默认 "auto" 传递一个px时指定top t b r l lt lb rt rb 快捷指定上下左右 传递[px,px]同时指定top left
            // btn: ["按钮1", "按钮2"],
            // btnAlign: "l", // 按钮对齐方式 默认r 可选 l c r
            closeBtn: 2, // 右上角关闭的样式 默认1 可选 0 1 2
            shade: 0.5, // 遮罩 默认0.3 可选 number boolean
            shadeClose: true, // 点击遮罩是否关闭 默认false
            // time :0,// 自动关闭时间 默认不自动关闭 ms
            // id: "", // 设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
            anim: 1, // 动画样式 css3 ie9+  默认  0	平滑放大。1	从上掉落 2	从最底部往上滑入 3	从左滑入4	从左翻滚  5	渐显 6	抖动
            // isOutAnim: false, // 关闭时的动画
            maxmin: true, // 是否显示最大最小化按钮 仅type 1 2 可用
            // fixed: false, // 默认true 设置为false后页面滚动弹窗也会滚动。
            // resize: false, // 是否允许拉伸
            // resizing: function (layero) {
            //   console.log(layero); // 监听弹窗拉伸事件
            // },
            // scrollbar: false,// 是否允许浏览器出现滚动条 没明白指得什么
            // maxWidth: "380", // 默认360 只有当area: 'auto'时，maxWidth的设定才有效
            // maxHeight: "400", // 只有当高度自适应时，maxHeight的设定才有效。
            zIndex: "123456", // 默认19891014
            // move: false, // 指定触发拖动的元素 String/DOM/Boolean，默认：'.layui-layer-title'
            // moveOut: true, // 是否允许拖拽到窗口外 默认false
            // moveEnd: function (layero) {
            //   console.log(layero); // 监听拖动完毕事件
            // },
            // tipsMore: true, //  是否允许多个tips 默认false
            success: function (layero, index) {
              console.log("监听到弹窗弹出"); // 弹窗弹出回调
            },
            end: function () {
              console.log("监听到弹窗销毁"); // 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
            },
            // min max restore  回调
            min: function (layero, index) {
              //index 参数为 layui 2.6.6 或独立版 layer 3.5.0 开始新增
              //当层最小化时触发
              //自定义操作，并阻止默认最小化
              // layer.min(index); //单独执行最小化
              return false; //阻止默认最小化
            },
            // minStack: true, // 是否默认堆叠在左下角 默认true layui 2.6.6 或独立版 layer 3.5.0 开始新增
            // yes he btn1 二选一
            // yes: function (index, layero) {
            //   console.log("yes", index, layer);
            // },

            btn1: function (index, layero) {
              console.log("确定", index, layer);
            },
            btn2: function (index, layero) {
              console.log("取消", index, layer);
              // 阻止关闭
              return false;
            },
            cancel: function (index, layero) {
              console.log("右上角", index, layer);
            },
          });
        });
        $("#layerOpen2").on("click", function () {
          layer.open({
            type: 2,
            title: "iframe content 传入url",
            // content: "http://sentsin.com",
            // 传入第二个参数可以取消滚动条
            content: ["http://sentsin.com", "no"],
          });
        });
        $("#layerOpen3").on("click", function () {
          layer.open({
            type: 3,
            // icon: 2, // 默认为0 可传入0-2
          });
        });
        $("#layerOpen4").on("click", function () {
          // layer.tips("内容", "#layerOpen4", {
          //   tips: 1, // 方向
          // });
          layer.open({
            type: 4,
            // 数组第二项即吸附元素选择器或者DOM
            content: ["内容", "#layerOpen4"],
            shadeClose: true,
          });
        });
        $("#layerOpen5").on("click", function () {
          layer.open({
            type: 1,
            // 单个指定类名
            skin: "demo-open",
            title: "标题lll",
            content: "<h1>可传入字符串、html、dom</h1>",
          });
        });
        // 全局配置 指定弹窗类名 没有单个优先级高
        layer.config({
          // skin: "demo-class",
        });

        // layer.close(index)  // 关闭单个弹窗
        // layer.closeAll(function) // 关闭全部弹窗
        // layer.closeAll("dialog",function); //关闭信息框
        // layer.closeAll("page"); //关闭所有页面层
        // layer.closeAll("iframe"); //关闭所有的iframe层
        // layer.closeAll("loading"); //关闭加载层
        // layer.closeAll("tips"); //关闭所有的tips层

        // layer.style(index, {cssStyle}) - 重新定义层的样式
        // layer.title(title, index) - 改变层的标题
        // layer.title(title, index) - 改变层的标题
        // layer.getFrameIndex(windowName) - 获取特定iframe层的索引
        // layer.iframeAuto(index) - 指定iframe层自适应
        // layer.iframeSrc(index, url) - //重置特定iframe url
        // layer.setTop(layero) -置顶当前窗口
        // layer.full(index)、layer.min(index)、layer.restore(index) - 手工执行最大小化
      });
    </script>
  </body>
</html>
